<template>
	<view class="pub-saishi">
		<!-- 顶部背景图 -->
		<image class="header-bg" src="/static/bg.webp" mode="aspectFill"></image>

		<!-- 表单内容区 -->
		<view class="form-container">
			<!-- Logo -->
			<view class="logo-wrap">
				<image class="logo" :src="config.baseUrl + formData.img" @tap="uploadLogo"></image>
			</view>

			<!-- 表单项 -->
			<view class="form-item">
				<view class="label">举办方</view>
				<picker :value="hosterIndex" :range="hosterList" range-key="label" @change="onHosterChange" class="picker-input">
					<view :class="['input', !formData.hoster && 'placeholder']">
						{{ formData.hoster || "点击选择举办方" }}
					</view>
				</picker>
			</view>

			<view class="form-item">
				<view class="label">赛事名称</view>
				<input v-model="formData.tournamentName" class="input" placeholder="请填写真实赛事名称" placeholder-class="placeholder" />
			</view>

			<view class="form-item">
				<view class="label">举办城市</view>
				<input v-model="formData.city" class="input" placeholder="请选择地区" placeholder-class="placeholder" />
				<text class="location-icon">📍</text>
			</view>

			<!-- 新增时间选择 -->
			<view class="form-item">
				<view class="label">开始时间</view>
				<picker mode="date" :value="formData.startTime" @change="onStartTimeChange" class="picker-input">
					<view :class="['input', !formData.startTime && 'placeholder']">
						{{ formData.startTime || "请选择开始时间" }}
					</view>
				</picker>
			</view>

			<view class="form-item">
				<view class="label">结束时间</view>
				<picker mode="date" :value="formData.endTime" @change="onEndTimeChange" class="picker-input">
					<view :class="['input', !formData.endTime && 'placeholder']">
						{{ formData.endTime || "请选择结束时间" }}
					</view>
				</picker>
			</view>

			<!-- 新增装备要求字段 -->
			<view class="form-item">
				<view class="label">装备要求</view>
				<input v-model="formData.gearRequirements" class="input" placeholder="请输入装备要求" placeholder-class="placeholder" />
			</view>

			<!-- 新增纪律规定字段 -->

			
			<view class="form-item">
				<view class="label">纪律规定</view>
				<input v-model="formData.disciplineRules" class="input" placeholder="请输入纪律规定" placeholder-class="placeholder" />
			</view>
			<!-- 队伍数量 -->
			<view class="form-item">
				<view class="label">队伍数量</view>
				<input v-model="formData.num" class="input" placeholder="请输入队伍数量" placeholder-class="placeholder" />
			</view>
			<!-- 赛事类型 -->
			<view class="form-item">
				<view class="label">赛制</view>
				<!-- 单选按钮 -->
				<view class="radio-group">
					<view class="radio-item" :class="{ active: formData.saizhi === '5人制' }" @click="formData.saizhi = '5人制'"> 5人制 </view>
					<view class="radio-item" :class="{ active: formData.saizhi === '8人制' }" @click="formData.saizhi = '8人制'"> 8人制 </view>
					<view class="radio-item" :class="{ active: formData.saizhi === '11人制' }" @click="formData.saizhi = '11人制'"> 11人制 </view>
				</view>
			</view>

			<!-- 底部按钮 -->
			<view class="submit-btn" @click="createTournament">创建赛事</view>
		</view>
	</view>
</template>

<script>
import { createTournament } from "@/api/system/saishi";
import { upload } from "@/api/system/upload";
import { getDictDataList } from "@/api/system/index";
import config from "@/config";
export default {
	data() {
		return {
			formData: {
				hoster: "",
				tournamentName: "",
				city: "",
				gearRequirements: "",
				disciplineRules: "",
				startTime: "",
				endTime: "",
				img: "",
				num: "",
				saizhi: ""
			},
			config,
			hosterList: [],
			hosterIndex: 0
		};
	},
	onLoad() {
		this.getDictDataList();
	},
	methods: {
		getDictDataList() {
			getDictDataList().then((res) => {
				console.log(res.rows);
				res.rows.forEach((item) => {
					this.hosterList.push({
						label: item.dictLabel,
						value: item.dictLabel
					});
				});
			});
		},
		uploadLogo() {
			upload((res) => {
				console.log(res);
				this.formData.img = res.fileName;
			});
		},
		onStartTimeChange(e) {
			this.formData.startTime = e.detail.value;
		},
		onEndTimeChange(e) {
			this.formData.endTime = e.detail.value;
		},
		onHosterChange(e) {
			const index = e.detail.value;
			this.hosterIndex = index;
			this.formData.hoster = this.hosterList[index].label;
		},
		createTournament() {
			// 表单验证
			if (!this.formData.hoster) {
				return uni.showToast({
					title: "请选择举办方",
					icon: "none"
				});
			}
			if (!this.formData.tournamentName) {
				return uni.showToast({
					title: "请填写赛事名称",
					icon: "none"
				});
			}
			if (!this.formData.city) {
				return uni.showToast({
					title: "请选择举办城市",
					icon: "none"
				});
			}
			if (!this.formData.startTime) {
				return uni.showToast({
					title: "请选择开始时间",
					icon: "none"
				});
			}
			if (!this.formData.endTime) {
				return uni.showToast({
					title: "请选择结束时间",
					icon: "none"
				});
			}
			if (!this.formData.saizhi) {
				return uni.showToast({
					title: "请选择赛制",
					icon: "none"
				});
			}

			createTournament(this.formData).then((res) => {
				console.log(res);
				if (res.code === 200) {
					uni.showToast({
						title: "创建成功",
						icon: "none"
					});
					uni.switchTab({
						url: "/pages/saishi/saishi"
					});
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.pub-saishi {
	min-height: 100vh;
	background: #fff;

	.header-bg {
		width: 100%;
		height: 200px;
	}

	.form-container {
		margin-top: -50px;
		padding: 20px;
		border-radius: 20px 20px 0 0;
		background: #fff;
		position: relative;
	}

	.logo-wrap {
		width: 100px;
		height: 100px;
		margin: -60px auto 20px;
		padding: 15px;
		background: #fff;
		border-radius: 50%;

		.logo {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}

	.form-item {
		margin-bottom: 30px;

		.label {
			font-size: 16px;
			font-weight: bold;
			margin-bottom: 10px;
		}

		.input {
			width: 100%;
			height: 45px;
			border-bottom: 1px solid #eee;
			font-size: 14px;
		}

		.placeholder {
			color: #999;
		}

		.picker-input {
			width: 100%;
		}

		.radio-group {
			display: flex;
			justify-content: space-between;
			margin-top: 10px;

			.radio-item {
				flex: 1;
				text-align: center;
				padding: 10px 0;
				border: 1px solid #eee;
				border-radius: 4px;
				margin: 0 5px;
				font-size: 14px;

				&.active {
					background: #e8f5e9;
					border-color: #4caf50;
					color: #4caf50;
				}

				&:first-child {
					margin-left: 0;
				}

				&:last-child {
					margin-right: 0;
				}
			}
		}
	}

	.tags-wrap {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;

		.tag {
			padding: 8px 20px;
			border: 1px solid #eee;
			border-radius: 4px;
			font-size: 14px;

			&.active {
				background: #e8f5e9;
				border-color: #4caf50;
				color: #4caf50;
			}
		}
	}

	.submit-btn {
		width: 100%;
		height: 50px;
		line-height: 50px;
		text-align: center;
		background: #8bc34a;
		color: #fff;
		border-radius: 25px;
		font-size: 16px;
		margin-top: 40px;
	}

	.location-icon {
		position: absolute;
		right: 30px;
		font-size: 20px;
	}
}
</style>
